<!DOCTYPE html>

<!-- Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file. -->

<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/dart-64.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>DartPad</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="packages/octicons_css/octicons_4.4.0.css">

    <!-- codemirror -->
    <link href="packages/codemirror/css/codemirror.css" rel="stylesheet" media="screen">
    <link href="packages/codemirror/addon/lint/lint.css" rel="stylesheet" media="screen">
    <link href="packages/codemirror/addon/hint/show-hint.css" rel="stylesheet" media="screen">
    <link href="styles/cm-scrollbars.css" rel="stylesheet" media="screen">
    <link href="styles/cm-dartpad-dark.css" rel="stylesheet" media="screen">
    <link href="styles/cm-dartpad-light.css" rel="stylesheet" media="screen">

    <!-- primer -->
    <link rel="stylesheet" type="text/css" href="packages/primer_css/primer_12.1.0.css">

    <script src="packages/codemirror/codemirror.js" defer></script>
    <script src="packages/codemirror/addon/scroll/simplescrollbars.js" defer></script>
    <script src="packages/split/split.min.js" defer></script>

    <!-- check that local storage is enabled -->
    <script src="scripts/check_localstorage.js"></script>

    <script defer src="scripts/embed_html.dart.js"></script>
    <script defer src="scripts/ga.js"></script>
    <script defer src="scripts/polymerpatch.js"></script>
    <script type="text/javascript" src="dark_mode.js"></script>

    <!-- begin Material Design -->
    <script src="packages/mdc_web/material-components-web.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- end Material Design -->
</head>

<body class="d-flex flex-column">
<div id="progress-bar" role="progressbar" class="mdc-linear-progress hide">
    <div class="mdc-linear-progress__buffering-dots"></div>
    <div class="mdc-linear-progress__buffer"></div>
    <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
    </div>
    <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
    </div>
</div>
<div id="navbar">
    <nav>
        <div class="mdc-tab-bar" role="tablist">
            <div class="mdc-tab-scroller">
                <div class="mdc-tab-scroller__scroll-area">
                    <div class="mdc-tab-scroller__scroll-content">
                        <button id="editor-tab" class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" selected
                                tabindex="0">
                             <span class="mdc-tab__content">
                                 <span class="mdc-tab__text-label">Dart</span>
                             </span>
                            <span class="mdc-tab-indicator mdc-tab-indicator--active">
                                 <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                             </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>
                        <button id="html-tab" class="mdc-tab mdc-tab" role="tab" tabindex="0">
                             <span class="mdc-tab__content">
                                 <span class="mdc-tab__text-label">HTML</span>
                             </span>
                            <span class="mdc-tab-indicator mdc-tab-indicator">
                                 <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                             </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>
                        <button id="css-tab" class="mdc-tab mdc-tab" role="tab" tabindex="0">
                             <span class="mdc-tab__content">
                                 <span class="mdc-tab__text-label">CSS</span>
                            </span>
                            <span class="mdc-tab-indicator mdc-tab-indicator">
                                 <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                             </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>
                        <button id="solution-tab" class="mdc-tab mdc-tab" role="tab" tabindex="0" hidden>
                             <span class="mdc-tab__content">
                                 <span class="mdc-tab__text-label">Solution</span>
                             </span>
                            <span class="mdc-tab-indicator mdc-tab-indicator">
                                 <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                             </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>
                        <button id="test-tab" class="mdc-tab mdc-tab" role="tab" tabindex="0">
                             <span class="mdc-tab__content">
                                 <span class="mdc-tab__text-label">Tests</span>
                            </span>
                            <span class="mdc-tab-indicator mdc-tab-indicator">
                                 <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                             </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div class="nav-buttons">
        <button id="install-button" class="mdc-button">Install SDK</button>
        <button id="show-hint" class="mdc-button">Hint</button>
        <button id="format-code" class="mdc-button">Format</button>
        <button id="reload-gist" class="mdc-button">Reset</button>
        <button id="execute" class="mdc-button mdc-button--raised">
            <i class="material-icons mdc-button__icon">play_arrow</i>
            Run
        </button>
        <div class="position-relative text-right pr-2">
            <button id="menu-button" class="mdc-icon-button material-icons">more_vert</button>
            <div id="main-menu" class="mdc-menu mdc-menu-surface">
                <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
                    <li id="show-test-menu-item" class="mdc-list-item" role="menuitem">
                        <span id="show-test-checkmark" class="mdc-list-item__graphic hide">
                            <i class="material-icons mdc-select__icon" tabindex="-1" role="button">check</i>
                        </span>
                        <span class="mdc-list-item__text">Show tests</span>
                    </li>
                    <li id="editable-test-solution-menu-item" class="mdc-list-item" role="menuitem">
                      <span id="editable-test-solution-checkmark" class="mdc-list-item__graphic hide">
                          <i class="material-icons mdc-select__icon" tabindex="-1" role="button">check</i>
                      </span>
                      <span class="mdc-list-item__text">Editable test/solution</span>
                  </li>
                  <li id="toggle-null-safety-menu-item" class="mdc-list-item" role="menuitem">
                    <span id="toggle-null-safety-checkmark" class="mdc-list-item__graphic hide">
                        <i class="material-icons mdc-select__icon" tabindex="-1" role="button">check</i>
                    </span>
                    <span class="mdc-list-item__text">Null Safety</span>
                  </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<section id="tab-container">
    <div id="editor-and-console-container">
        <div id="editor-container">
            <div id="user-code-view" class="flex-auto d-flex flex-row no-overflow">
                <div id="user-code-editor" spellcheck="false"></div>
            </div>
            <div id="html-view" class="flex-auto d-flex flex-row no-overflow" spellcheck="false" hidden>
                <div id="html-editor" class="flex-auto d-flex flex-column" spellcheck="false"></div>
            </div>
            <div id="css-view" class="flex-auto d-flex flex-row no-overflow" spellcheck="false" hidden>
                <div id="css-editor" class="flex-auto d-flex flex-column" spellcheck="false"></div>
            </div>
            <div id="solution-view" class="flex-auto d-flex flex-row no-overflow" spellcheck="false" hidden>
                <div id="solution-editor" class="flex-auto d-flex flex-column" spellcheck="false"></div>
            </div>
            <div id="test-view" class="flex-auto d-flex flex-row no-overflow" spellcheck="false" hidden>
                <div id="test-editor" class="flex-auto d-flex flex-column" spellcheck="false"></div>
            </div>
        </div>
        <div class="editor-button-group">
            <button id="copy-code" title="Copy code" class="mdc-icon-button material-icons">file_copy</button>
            <button id="open-in-dartpad" title="Full screen" class="mdc-icon-button material-icons">launch</button>
        </div>        <div id="console-output-footer" class="footer-top-border" hidden>
            <div id="console-output-header">
                <span class="view-label">
                    Console <span id="unread-console-counter" class="Counter" hidden></span>
                </span>
                <div id="console-expand-icon" class="octicon octicon-triangle-up"></div>
            </div>
            <div id="console-output-container" class="custom-scrollbar" hidden></div>
        </div>
    </div>
    <div id="web-output">
        <span id="web-output-label" class="view-label">UI Output</span>
        <iframe id="frame" sandbox="allow-scripts" class="flex-auto">
        </iframe>
    </div>
</section>

<footer flex layout horizontal class="footer">
    <div id="feature-message" class="info-message"></div>
    <div id="issues-message" class="info-message"></div>
    <button id="issues-toggle" class="mdc-button mdc-button--dense mdc-button--outlined" hidden></button>
</footer>

<div id="flash-container" class="position-fixed right-2 bottom-6">
    <div id="analysis-result-box" class="flash flash-error" hidden>
        <button class="flash-close">
            <div class="octicon octicon-x"></div>
        </button>
        <div class="message-container custom-scrollbar"></div>
    </div>
    <div id="test-result-box" class="flash flash-warn" hidden>
        <button class="flash-close">
            <div class="octicon octicon-x"></div>
        </button>
        <div class="message-container custom-scrollbar"></div>
    </div>
    <div id="hint-box" class="flash" hidden>
        <button class="flash-close">
            <div class="octicon octicon-x"></div>
        </button>
        <div class="message-container custom-scrollbar"></div>
    </div>
    <div id="issues" hidden></div>
</div>

<div class="mdc-dialog"
     role="alertdialog"
     aria-modal="true"
     aria-labelledby="my-dialog-title"
     aria-describedby="my-dialog-content">
    <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface">
            <h2 class="mdc-dialog__title" id="my-dialog-title"></h2>
            <div class="mdc-dialog__content" id="my-dialog-content"></div>
            <footer class="mdc-dialog__actions">
                <button type="button" id="dialog-left-button" class="mdc-button mdc-dialog__button">
                    <span class="mdc-button__label">No</span>
                </button>
                <button type="button" id="dialog-right-button" class="mdc-button mdc-dialog__button">
                    <span class="mdc-button__label">Yes</span>
                </button>
            </footer>
        </div>
    </div>
    <div class="mdc-dialog__scrim"></div>
</div>

</body>

</html>
